<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="static/css/login.css">
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/axios.min.js"></script>
    <script src="static/js/param.js"></script>
</head>

<body>
    <div class="shell" id="app">

        <!-- 创建账号容器 -->
        <div class="container b-container" id="b-container">
            <form @submit.prevent="onRegisterSubmit" class="form" id="a-form">
                <h2 class="form_title title">创建账号</h2>
                <div class="form_icons">
                    <i class="iconfont icon-QQ" href="/vscf/index.html"></i>
                    <i class="iconfont icon-weixin" href="/vscf/index.html"></i>
                    <i class="iconfont icon-bilibili-line" href="/vscf/index.html"></i>
                </div>
                <span class="form_span">欢迎加入我们</span>
                <input type="text" v-model="form.account" class="form_input" id="signup-name" placeholder="账号">
                <input type="password" v-model="form.password" class="form_input" id="signup-password" placeholder="密码" @input="checkPasswordStrength">
                <span id="password-strength-message" style="color: red;"></span>
                <input type="email" v-model="form.email" class="form_input" id="signup-email" placeholder="邮箱" @blur="validateEmail">
                <span id="email-error-message" style="color: red;"></span>
                <button type="button" id="btnGetVcode" @click="getVerificationCode" style="position: absolute;top: 350px;left: 367px;" :disabled="isVcodeDisabled"
                :class="['vcode-btn', { 'disabled': isVcodeDisabled }]">
                    {{ buttonText }}
                </button>

                <input type="text" id="vcode" v-model="form.vcode" placeholder="请输入验证码" class="form_input">
                <span id="message" style="color: red;"></span>
                <button type="submit" class="form_button button submit" id="signup-button">注册</button>
            </form>
        </div>

        <!-- 登录账号容器 -->
        <div class="container a-container" id="a-container">
            <form @submit.prevent="onSubmit" id="b-form" class="form" action="/vscf/user/login" method="post">
                <h2 class="form_title title">登入账号</h2>
                <div class="form_icons">
                    <a href="/index.html">
                        <i class="iconfont icon-QQ"></i>
                        <i class="iconfont icon-weixin"></i>
                        <i class="iconfont icon-bilibili-line"></i>
                    </a>
                </div>
                <span class="form_span">欢迎</span>
                <input type="text" v-model="form.account" class="form_input" id="login-email" placeholder="账号" name="account">
                <input type="password" v-model="form.password" class="form_input" id="login-password" placeholder="密码" name="password">
                <button type="submit" class="form_button button submit" id="login-button">登录</button>
            </form>
        </div>

        <!-- 切换登录与注册 -->
        <div class="switch" id="switch-cnt">
            <div class="switch_circle"></div>
            <div class="switch_circle switch_circle-t"></div>
            <div class="switch_container" id="switch-c1">
                <h2 class="switch_title title" style="letter-spacing: 0; font-size: 30px;">
                    {{ errorMessage || 'WelcomeBack' }}
                </h2>
                <p class="switch_description description">已经有账号了嘛，去登入账号来进入奇妙世界吧！！！</p>
                <button class="switch_button button switch-btn" @click="toggleForm">SIGN IN</button>
            </div>
            <div class="switch_container is-hidden" id="switch-c2">
                <h2 class="switch_title title" style="letter-spacing: 0; font-size: 30px;">
                    {{ errorMessage || 'HelloFriend!' }}
                </h2>
                <p class="switch_description description">去注册一个账号，成为尊贵的粉丝会员，让我们踏入奇妙的旅途！</p>
                <button class="switch_button button switch-btn" @click="toggleForm">SIGN UP</button>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    showPassword: false,
                    loading: false,
                    isVcodeDisabled: false,
                    vcodeTimer: 60,
                    form: {
                        account: "",
                        password: "",
                        email: "",
                        vcode: ""
                    },
                    errorMessage: "",
                    successMessage: "",
                    failedAttempts: 0,
                    maxAttempts: 5,
                    showCaptcha: false,
                     buttonText: "获取验证码" 
                };
            },
            mounted() {
                console.log("Vue实例挂载成功");
            },
            methods: {
                toggleForm() {
                    const switchCtn = document.querySelector("#switch-cnt");
                    const switchCircle = document.querySelectorAll(".switch_circle");
                    const switchC1 = document.querySelector("#switch-c1");
                    const switchC2 = document.querySelector("#switch-c2");
                    const aContainer = document.querySelector("#a-container");
                    const bContainer = document.querySelector("#b-container");
                    switchCtn.classList.add("is-gx");
                    setTimeout(function () {
                        switchCtn.classList.remove("is-gx");
                    }, 1500);
                    switchCtn.classList.toggle("is-txr");
                    switchCircle[0].classList.toggle("is-txr");
                    switchCircle[1].classList.toggle("is-txr");
                    switchC1.classList.toggle("is-hidden");
                    switchC2.classList.toggle("is-hidden");
                    aContainer.classList.toggle("is-txl");
                    bContainer.classList.toggle("is-txl");
                    bContainer.classList.toggle("is-z");
                },
                validateForm() {
                    if (!this.form.account || !this.form.password) {
                        this.showErrorMessage("账号和密码不能为空");
                        return false;
                    }
                    return true;
                },
                showErrorMessage(message) {
                    this.errorMessage = message;
                    setTimeout(() => {
                        this.errorMessage = ""; // 清空错误消息
                    }, 3000);
                },
                checkPasswordStrength() {
                    const password = this.form.password;
                    const strengthMessage = document.getElementById('password-strength-message');
                    const regExp = {
                        upper: /[A-Z]/,
                        lower: /[a-z]/,
                        digit: /\d/,
                        special: /[!@#$%^&*(),.?":{}|<>]/
                    };
                    let strength = 0;
                    if (password.length >= 8) strength++;
                    if (regExp.upper.test(password)) strength++;
                    if (regExp.lower.test(password)) strength++;
                    if (regExp.digit.test(password)) strength++;
                    if (regExp.special.test(password)) strength++;

                    switch (strength) {
                        case 0:
                        case 1:
                            strengthMessage.textContent = "密码太弱";
                            strengthMessage.style.color = "red";
                            break;
                        case 2:
                        case 3:
                            strengthMessage.textContent = "密码一般";
                            strengthMessage.style.color = "orange";
                            break;
                        case 4:
                            strengthMessage.textContent = "密码强";
                            strengthMessage.style.color = "green";
                            break;
                    }
                },
                validateEmail() {
                    const email = this.form.email;
                    const emailErrorMessage = document.getElementById('email-error-message');
                    const regExp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                    if (!regExp.test(email)) {
                        emailErrorMessage.textContent = "请输入有效的邮箱地址";
                        emailErrorMessage.style.color = "red";
                        this.isVcodeDisabled = true;  // 禁用验证码按钮
                    } else {
                        emailErrorMessage.textContent = "";
                        this.isVcodeDisabled = false; // 启用验证码按钮
                    }
                },
                getVerificationCode() {
                    if (!this.form.email) {
                        this.showErrorMessage("请输入有效的邮箱！");
                        return;
                    }
                    this.isVcodeDisabled = true;
                    this.startVcodeCooldown(this.vcodeTimer);
                    // 发送验证码请求
                    axios.get(`/vscf/user/getUsercode?email=${this.form.email}`)
                        .then(response => {
                            if (response.data && response.data.success) {
                                console.log('验证码已发送');
                            } else {
                                this.showErrorMessage(response.data.message || "验证码获取失败，请稍后重试");
                            }
                        })
                        .catch(error => {
                            this.showErrorMessage("获取验证码失败，请稍后再试");
                        });
                },
                startVcodeCooldown(time) {
                    const btn = document.getElementById("btnGetVcode");
                    let countdown = setInterval(() => {
                        if (time > 0) {
                            this.buttonText = `(${time}s) 重新获取`;  // 更新按钮文本
                            time--;
                        } else {
                            clearInterval(countdown);
                            this.buttonText = "获取验证码";  // 恢复按钮文本
                            this.isVcodeDisabled = false;
                        }
                    }, 1000);
                },

                // 注册提交
                onRegisterSubmit() {
                    this.loading = true;
                    if (!this.validateForm()) {
                        this.loading = false;
                        return;
                    }
                    if (!this.form.vcode) {
                        this.showErrorMessage("请输入验证码！");
                        this.loading = false;
                        return;
                    }
                    // 发送注册请求
                    axios.post('/vscf/user/register', this.form)
                        .then(response => {
                            if (response.data && response.data.success) {
                                this.successMessage = "注册成功！可以登录了！";
                                alert(this.successMessage);
                                window.location.href = '/vscf/login.html';
                            } else {
                                this.showErrorMessage(response.data.message || "注册失败，请稍后再试！");
                            }
                        })
                        .catch(error => {
                            console.error(error); // 输出错误信息
                            this.showErrorMessage("注册失败，请稍后再试！");
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },

                // 登录提交
                onSubmit() {
                    this.loading = true;
                    if (this.failedAttempts >= this.maxAttempts) {
                        this.showCaptcha = true;
                    }

                    if (!this.validateForm()) {
                        this.loading = false;
                        return;
                    }

                    axios.post('/vscf/user/login', this.form)
                        .then(response => {
                            if (response.data && response.data.success) {
                                window.location.href = '/vscf/index.html';
                            } else {
                                this.failedAttempts++;
                                this.showErrorMessage(response.data.message || "登录失败，请稍后再试");
                                if (this.failedAttempts >= this.maxAttempts) {
                                    this.showCaptcha = true;
                                }
                            }
                        })
                        .catch(error => {
                            this.showErrorMessage("登录失败，请稍后再试");
                            this.failedAttempts++;
                            if (this.failedAttempts >= this.maxAttempts) {
                                this.showCaptcha = true;
                            }
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                }
            }
        });
    </script>

</body>

</html>
